// 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果
import React, { useState } from "react";
const App: React.FC = () => {
  const [formData, setFormData] = useState({
    orderName: "",
    orderType: "",
    customer: "",
    contract: "",
    deposit: "",
    freePeriod: "",
    startDate: "",
    endDate: "",
    remark: ""
  });
  const [products, setProducts] = useState<any[]>([]);
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-[1440px] mx-auto">
        {/* 基本信息 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <h2 className="text-lg font-medium mb-6 border-l-4 border-blue-500 pl-3">
            基本信息
          </h2>
          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
            <div className="space-y-2">
              <label className="block text-sm">
                <span className="text-red-500">*</span> 订单名称
              </label>
              <input
                type="text"
                placeholder="请输入订单名称"
                className="w-full h-10 px-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div className="space-y-2">
              <label className="block text-sm">
                <span className="text-red-500">*</span> 订单类型
              </label>
              <div className="relative">
                <select className="w-full h-10 px-3 border rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <option value="">请选择订单类型</option>
                </select>
                <i className="fas fa-chevron-down absolute right-3 top-3 text-gray-400" />
              </div>
            </div>
            <div className="space-y-2">
              <label className="block text-sm">
                <span className="text-red-500">*</span> 所属客户
              </label>
              <div className="relative">
                <select className="w-full h-10 px-3 border rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <option value="">请选择所属客户</option>
                </select>
                <i className="fas fa-chevron-down absolute right-3 top-3 text-gray-400" />
              </div>
            </div>
            <div className="space-y-2">
              <label className="block text-sm">
                <span className="text-red-500">*</span> 所属合同
              </label>
              <div className="relative">
                <select className="w-full h-10 px-3 border rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <option value="">请选择所属合同</option>
                </select>
                <i className="fas fa-chevron-down absolute right-3 top-3 text-gray-400" />
              </div>
            </div>
            <div className="space-y-2">
              <label className="block text-sm">押金金额</label>
              <div className="relative">
                <input
                  type="text"
                  placeholder="请输入押金金额"
                  className="w-full h-10 px-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <span className="absolute right-3 top-2.5 text-gray-500">
                  元
                </span>
              </div>
            </div>
            <div className="space-y-2">
              <label className="block text-sm">免费使用期</label>
              <div className="relative">
                <input
                  type="text"
                  placeholder="请输入免费使用期"
                  className="w-full h-10 px-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <span className="absolute right-3 top-2.5 text-gray-500">
                  天
                </span>
              </div>
            </div>
            <div className="col-span-2 space-y-2">
              <label className="block text-sm">
                <span className="text-red-500">*</span> 服务起止日期
              </label>
              <div className="flex items-center space-x-4">
                <input
                  type="date"
                  className="flex-1 h-10 px-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <span className="text-gray-500">至</span>
                <input
                  type="date"
                  className="flex-1 h-10 px-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>
            </div>
            <div className="col-span-2 space-y-2">
              <label className="block text-sm">备注</label>
              <textarea
                placeholder="请输入备注"
                rows={4}
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>
        </div>
        {/* 商品信息 */}
        <div className="bg-white rounded-lg shadow-sm p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-lg font-medium border-l-4 border-blue-500 pl-3">
              商品信息
            </h2>
            <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors duration-200 !rounded-button whitespace-nowrap">
              <i className="fas fa-plus mr-2" />
              添加商品
            </button>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    商品ID
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    商品名称
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    商品类型
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    规格
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    数量
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    计费规则
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    规则信息
                  </th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">
                    操作
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    className="px-4 py-6 text-gray-500 text-center"
                    colSpan={8}
                  >
                    暂无数据
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        {/* 操作按钮 */}
        <div className="flex justify-center space-x-4 mt-8">
          <button className="bg-blue-500 text-white px-8 py-2.5 rounded-md hover:bg-blue-600 transition-colors duration-200 !rounded-button whitespace-nowrap">
            提交
          </button>
          <button className="text-gray-600 px-8 py-2.5 rounded-md border hover:bg-gray-50 transition-colors duration-200 !rounded-button whitespace-nowrap">
            取消
          </button>
        </div>
      </div>
    </div>
  );
};
export default App;
